<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">点我有惊喜</button>
  </body>
</html>
<script>
  // 1.1事件监听
  // 语法：
  //  元素对象.addeEventListener('事件类型',事件处理函数)
  // ***
  // 需求：点击 button 按钮，页面会弹出一个警示框
  // 事件监听语法:
  // 元素对象.addEventListener('事件类型', 事件处理函数)
  // 1. 获取元素对象 button按钮
  const btn = document.querySelector(".btn");

  // 2.事件监听
  // 参数1： 事件类型  click-点击
  //    参数2：事件处理函数
  btn.addEventListener("click", function () {
    alert("惊喜");
  });

  // 注意： 事件三要素
  // 1.事件源    DOM元素
  // 2.事件类型  什么事儿
  // 3.事件处理函数  干嘛
</script>
